<template>
  <div class="basicForm">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="标题" prop="title" required>
        <a-input v-model="form.title" />
      </a-form-model-item>
      <a-form-model-item label="商品描述" prop="desc">
        <a-input v-model="form.desc" type="textarea" />
      </a-form-model-item>
      <a-form-model-item label="商品类目" prop="category" required>
        <a-select
          v-model="form.category"
          placeholder="请选择商品类目"
          @change="switchC_items"
        >
          <a-select-option
            v-for="item in categoryList"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-select v-model="form.c_item" placeholder="商品子类目">
          <a-select-option
            v-for="item in c_itemsList"
            :key="item"
            :value="item"
          >
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="商品标签" required prop="tags">
        <a-select
          mode="tags"
          placeholder="Please select"
          :default-value="['包邮，最晚次日达']"
          v-model="form.tags"
        >
          <a-select-option value="包邮，最晚次日达">
            包邮，最晚次日达
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 20 }">
        <a-button type="primary" @click="onSubmit">下一步</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import category from "@/api/category";
export default {
  props: ["form"],

  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 10 },
      //   form: {
      //     title: "", // 商品标题
      //     desc: "", // 商品描述
      //     category: "", // 商品类目
      //     c_items: [], //商品子类目
      //     tags: "包邮，最晚次日达", // 商品标签
      //   },
      categoryList: [], // 商品类目列表
      c_itemsList: [], // 商品子类目
      rules: {},
    };
  },
  created() {
    category().then((r) => {
      //   console.log(r.data);
      this.categoryList = r.data;
    });
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("next", this.form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    switchC_items(val) {
      // 根据当前商品类目获得对应的子类目
      for (let i = 0; i < this.categoryList.length; i++) {
        if (val === this.categoryList[i].id) {
          this.c_itemsList = this.categoryList[i].c_items;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>
